/**
 * ### 在使用mini-css-extract-plugin 插件提取css文件，未被转换为base64的图片资源文件路径问题
 * 
 * 图片资源会打包到image目录下，但在引用这个图片的路径会多一层css,
 * 解决方案：在MiniCssExtract.loader新增options:{publicPath:'../}
*/


/**
 * 在使用mini-css-extract-plugin 插件提取css文件后，打包告警module has no exports
 * 解决方案：在MiniCssExtract.loader新增options:{publicPath:'../,esModule:false}
*/


const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    output:{
        assetModuleFilename:'image/[name].[hash:8][ext]'
    },
    module:{
        rules:[
            {
                test:/\.(sass|scss)$/i,
                use:[
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:MiniCssExtractPlugin.loader,
                        //
                        options:{
                            publicPath:'../',
                            esModule:false
                        }
                    },
                    {
                        loader:'css-loader'
                    },
                    {
                        loader:'sass-loader'
                    }
                ]
            },
            {
                test:/\.(png|webp|jpg|jpeg|gif)$/i,
                type:'asset',
                parser:{
                    dataUrlCondition:{
                        maxSize:1024
                    }
                }
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/[name].[hash:8].css',
            chunkFilename:'css/[name]:[hash:8].css',
        })
    ]
}